<template>
	<div class="categories-wrapper">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row>
				<el-col><el-button type="primary" @click="addCate">添加分类</el-button></el-col>
			</el-row>
			<!-- 分类类标区域 -->
			<zk-table class="tableTree" :data="cateList" :columns="columns" border :selection-type="false" show-index index-text="#" :expand-type="false">
				<!-- 是否有效 -->
				<template slot="isok" scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #39ce39"></i>
					<i class="el-icon-error" v-else style="color: #f00"></i>
				</template>
				<!-- 排序 -->
				<template slot="order" scope="scope">
					<el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag type="warning" v-else>三级</el-tag>
				</template>
				<!-- 操作 -->
				<template slot="opt">
					<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-danger">删除</el-button>
				</template>
			</zk-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[2, 3, 5, 10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			/>
		</el-card>
		<!-- 添加商品分类 -->
		<el-dialog title="添加商品分类" :visible.sync="addGoodsCateVisible" width="50%">
			<el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px">
				<!-- 分类名称 -->
				<el-form-item label="分类名称" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item>
				<!-- 父级分类 -->
				<el-form-item label="父级分类">
				<el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="handleChange" style="width: 100%" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAddCateDialog">取 消</el-button>
				<el-button type="primary" @click="saveCateInfo">确 定</el-button>
			</span>
		</el-dialog>
			</div>
</template>

<script>
export default {
	data() {
		return {
			// 查询参数
			queryInfo: {
				pagenum: 1, 
				pagesize: 5 
			},
			cateList: [],
			total: 0,
			columns: [
				{ label: '分类名称', prop: 'cat_name' },
				{ label: '是否有效', type: 'template', template: 'isok' },
				{ label: '排序', type: 'template', template: 'order' },
				{ label: '操作', type: 'template', template: 'opt' }
			],
			addGoodsCateVisible: false,
				addCateForm: {
					cat_name: '',
				cat_pid: 0,
				cat_level: 0
			},
				addCateRules: {
				cat_name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }]
			},
			cascaderProps: {
				expandTrigger: 'hover',
				value: 'cat_id',
				label: 'cat_name',
					children: 'children'
			},
			parentCateList: [],
			selectedKeys: []
		};
	},
	created() {
		this.getCateList();
	},
	methods: {
		// 获取分类列表的数据
		async getCateList() {
			const res = await this.$http.get('categories', {
				params: this.queryInfo
			});
			const { data, meta } = res.data;
			if (meta.status !== 200) {
				this.$message.error(meta.msg);
			} else {
					this.cateList = data.result;
				this.total = data.total;
			}
		},
		handleSizeChange(val) {
			this.queryInfo.pagesize = val;
			this.getCateList();
		},
	handleCurrentChange(val) {
			this.queryInfo.pagenum = val;
			this.getCateList();
		},
		// 添加商品分类
		async addCate() {
				const res = await this.$http.get('/categories', { params: { type: 2 } });
			const { data, meta } = res.data;
			if (meta.status !== 200) {
				this.$message.error(meta.msg);
			} else {
					this.parentCateList = data;
			}
			this.addGoodsCateVisible = true;
		},
		// 确定添加分类
		saveCateInfo() {
			this.$refs.addCateRef.validate(async valid => {
				if (!valid) return;
				const res = await this.$http.post('/categories', this.addCateForm);
				const { meta } = res.data;
				if (meta.status !== 201) {
					this.$message.error(meta.msg);
				} else {
					this.$message.success('添加分类成功');
					this.getCateList();
					this.addGoodsCateVisible = false;
					this.addCateForm = {};
					this.selectedKeys = [];
				}
			});
		},
		// 取消
		closeAddCateDialog() {
			this.addCateForm = {};
			this.selectedKeys = [];
			this.addGoodsCateVisible = false;
		},
		handleChange() {
		if (this.selectedKeys.length === 0) {
				this.addCateForm.cat_pid = 0;
				this.addCateForm.cat_level = 0;
			} else {
				this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
				this.addCateForm.cat_level = this.selectedKeys.length;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tableTree {
	margin-top: 15px;
}
</style>
